function PopupTree () {
    function buildPanel ()
    {
        var div = document.createElement ("div");
        div.id = "AreaPanel";
        div.style.border = "1px solid #999999";
        div.style.backgroundColor = 'lightyellow';
        div.style.width = '250px';
        div.style.height = '200px';
        div.style.display = 'none';
        div.style.zIndex = '200';
        div.style.position = 'absolute';
        div.style.overflow = 'auto';
        div.style.left = "0px";
        div.style.top = "0px";

        document.body.appendChild (div);

        var backup = document.onclick;
        document.onclick = function (e) {
            if (backup) {
                if (e) backup (e);
                else backup ();
            }

            closePanel ();
        }
    }

    function closePanel () {
        var panel = document.getElementById ("AreaPanel");
        var bottom = document.getElementById ("_$_bottom_$_");
        if (panel) panel.style.display = 'none';
        if (bottom) bottom.style.display = 'none'; 
    }

    function OnTreeNodeClicked (e) {
        display_control.value = e.source.getCaption ();
        id_control.value = e.source.id;
        closePanel ();
    }

    function showTree () {
        var ie6 = window.navigator.userAgent.indexOf("MSIE 6") >= 0;
        var panel = document.getElementById ("AreaPanel");
        var pos = org.dreamwork.js.util.Util.getPosition (display_control);
        var w = parseInt (1.5 * display_control.scrollWidth, 10);
        var top = (pos.y + display_control.scrollHeight + 3) + "px";
        if (ie6) {
            var bottom = document.getElementById ("_$_bottom_$_");
            if (!bottom) {
                bottom = document.createElement ("iframe");
                bottom.id = "_$_bottom_$_";
                bottom.style.width = '250px';
                bottom.style.height = '200px';
                bottom.style.display = 'none';
                bottom.style.zIndex = '199';
                bottom.style.border = "1px solid #999999";
                bottom.style.position = 'absolute';                
                document.body.appendChild(bottom);
            }
            bottom.style.left = pos.x + 'px';
            bottom.style.width = (w - 2) + 'px';
            bottom.style.height = (panel.style.pixelHeight - 2) + 'px';
            bottom.style.top = top;
            bottom.style.display = 'block';
        }
        panel.style.left = pos.x + "px";
        panel.style.width = w + "px";
        panel.style.top = top;
        panel.style.display = 'block';
    }

    buildPanel ();
    BuildTree ("AreaPanel");
    tree.addClickListener (OnTreeNodeClicked);
    stopBubble ("AreaPanel");

	var display_control, id_control;

    this.install = function (id, display) {
		display_control = document.getElementById (display);
        var backup = display_control.onclick;

        display_control.onclick = function (e) {
            if (!window.event) FixPrototypeForGecko ();
            event.cancelBubble = true;
            if (backup) {
                if (e) backup (e);
                else backup ();
            }

			display_control = document.getElementById (display);
			id_control = document.getElementById (id);
            showTree ();
        }
    }

    this.close = closePanel; 
}